<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajaxdemo</title>
<!--引入bootstrap样式文件--->
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />

<link
	href="static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen">
<!-- 引入分页插件 -->
<link rel="stylesheet" type="text/css"
	href="static/paginationjs-master-2.1.0/dist/pagination.css" />
<!-- bootstrap 模态框 css -->
<link rel="stylesheet" type="text/css"
	href="static/BootstrapEx_pop-up/css/bootstrapEx.css" />

<!--引入jquery-->
<script type="text/javascript"
	src="static/js/jquery-1.12.4/jquery-1.12.4.min.js"></script>
<!--引入bootstrap脚本--->
<script type="text/javascript"
	src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 引入分页插件 -->
<script type="text/javascript"
	src="static/paginationjs-master-2.1.0/dist/pagination.min.js"></script>

<!-- bootstrap 模态框 -->
<script type="text/javascript"
	src="static/BootstrapEx_pop-up/js/bootstrapEx.js"></script>
<script type="text/javascript">
	/*
	 * 弹出框、模态框调用 
	 */
	function InitModal3(pageUri) {
		// 定义一个模态框对象
		var Modal3;
		$(document.body).append('<div id="modal3"></div>');
		Modal3 = new Modal();
		Modal3.renderto = "#modal3";
		Modal3.InitShow = true;
		Modal3.btns = [ 
			/* {
			id : "savebtn",
			text : "保存"
		}, */
		{
			id : "closebtn"
		} ]
		tab1 = new Tab();
		Modal3.OnfirstInited = function(thismodal) {
			tab1.tabs = [ {
				id : "tabs1",
				title : "",
				active : true,
				isiframe : true,
				url : pageUri
			}];
			tab1.renderto = thismodal.body;
			tab1.Init();
		}
		
		// 显示模态框
		Modal3.show();
		
		// 给模态框的 确定按钮  绑定一个点击事件
		$("#closebtn").click(function(){
			console.info("你点击了模态框的保存按钮");
			// 获取模态框中的iframe页面中的from表单数据
			console.info($('#tabs1'));
			console.info($('iframe').contents().find("#modifyModelForm1").serialize());
			console.info($('iframe').contents().find("#hiddenclick"));
			// 使用选择器找到模态框中jsp页面的from表单对象，并调动其点击事件，进行ajax方法处理
			$('iframe').contents().find("#hiddenclick").click();
			
		});
		
		// Modal关闭完成时的事件处理(只需要定义该函数就会调用)
		modal3_Hideend = function() {
			// 调用修改保存事件
			// 使用选择器找到模态框中jsp页面的from表单对象，并调动其点击事件，进行ajax方法处理
			//$('iframe').contents().find("#hiddenclick").click();
			console.info("model关闭时执行的方法");
	        // 调用ajax进行数据修改之后的更新
			doAjaxQuery();
	        
			//alert("修改成功!");
	    }
	}

	
	// 使用jquery进行ajax处理
	function doAjaxQuery() {
		// 使用jquery进行ajax请求处理
		$.get("adminInfo/", function(data) {
			// 回调函数的dom操作
			// 解析json数据
			console.info(data);
			// 将ajax查询的结果进行分页处理
			doPaging(data, 5);
			/*
			 注意，如果返回数据为文本类型，需要将json字符串转为json对象
			each函数解析的是json对象，而不是json字符串
			 */
		});
	}

	// 分页处理--处理lsit类型的结果集
	function doPaging(data, pagesize) {

		if (isNaN(pagesize) || pagesize <= 0) {
			pagesize = 5; // 默认页面大小为5条记录
		}
		console.info("pagesize:" + pagesize);
		// 获取显示分页控件的div
		$('#querypager')
				.pagination(
						{
							dataSource : data, // 分页的数据源（可以是ajax查询成功之后的json数据对象）
							pageSize : pagesize,// 每页显示的记录条数
							showGoInput : true, // 是否显示goin按钮
							showGoButton : true,
							callback : function(data, pagination) {
								console.info(pagination);
								// 分页处理
								// 解析拼写的html内容
								var strHtml = "";
								$
										.each(
												data,
												function(index, eachVal) {
													strHtml += "<tr>";

													strHtml += "<th scope='row'>";
													strHtml += (index + 1);
													strHtml += "</th>";

													strHtml += "<td>";
													strHtml += eachVal.adminname;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += eachVal.adminaddress;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += eachVal.admintel;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += "<img src='";
													strHtml+=eachVal.adminimg;					
													strHtml+="' width='30px' height='30px'/>";
													strHtml += "</td>";
													// 添加修改按钮
													/* onclick='confirm(\"是否删除该记录?\")' */
													strHtml += "<td><a  href='javascript:InitModal3(\"jump2?pg=RESTFulManager/RESTFulModifyModal&uid=";
													strHtml += eachVal.adminid;
													strHtml += "\")'>修改</a></td>";
													// 添加删除按钮
													/* onclick='confirm(\"是否删除该记录?\")' */
													strHtml += "<td><a  href='javascript:ajax_deletebyId(";
													strHtml += eachVal.adminid;
													strHtml += ")'>删除</a></td>";

													strHtml += "</tr>";
												});

								// 把解析的html内容，使用dom操作赋值到表格中
								$("#displaytbody").html(strHtml);
							}
						})
	}

	// 删除的action处理
	function ajax_deletebyId(uid) {

		var isOK = confirm("是否删除该记录?");

		if (!isOK) {
			return false;
		}

		console.info("ajax_deletebyId");
		// 使用jquery进行ajax请求处理
		var delelteUri = "adminInfo/" + uid;
		console.info(delelteUri);
		$.ajax({
			type : "delete", // 请求类型
			url : delelteUri, // 请求的url
			//data : $("#form1").serialize(), // 发送的数据 使用serialize方法替代手动拼写数据串
			dataType : "json", // 响应发挥的数据类型  
			success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
				// 回调函数的dom操作

				// 解析json数据
				console.info(data);

				// 将ajax查询的结果进行分页处理
				doPaging(data, 5);
				/*
				 注意，如果返回数据为文本类型，需要将json字符串转为json对象
				each函数解析的是json对象，而不是json字符串
				 */

			},
			error : function(data) {
				alert("请求失败" + data);
			}
		});
	}
</script>
</head>
<body>
	<form id="form1" class="form-horizontal" action="LoginAction"
		method="post">
		<div class="form-group" style="margin-top: 10px;">
			<label class="col-sm-2 control-label">姓名</label>
			<div class="col-sm-3">
				<input type="text" class="form-control" id="adminname"
					name="adminname" placeholder="请输入用户名">
			</div>

			<label class="col-sm-2 control-label">地址</label>
			<div class="col-sm-3">
				<input type="text" class="form-control" id="adminaddress"
					name="adminaddress" placeholder="请输入地址">
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label">电话</label>
			<div class="col-sm-3">
				<input type="text" class="form-control" id="admintel"
					name="admintel" placeholder="请输入联系电话">
			</div>

			<label class="col-sm-2 control-label">注册日期</label>
			<div class="col-sm-3">
				<input type="date" class="form-control" id="regdate" name="regdate"
					placeholder="请输入开始时间">- <input type="date"
					class="form-control" id="regdate2" name="regdate2"
					placeholder="请输入结束时间">
			</div>
		</div>

		<div class="form-group">
			<div class="col-sm-offset-5 col-sm-2">
				<button type="button" class="btn btn-default"
					onclick="doAjaxQuery()">查询</button>
			</div>
		</div>

		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-7">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>地址</th>
							<th>手机</th>
							<th>头像</th>
							<th>删除</th>

						</tr>
					</thead>
					<tbody id="displaytbody">

					</tbody>
				</table>
			</div>
			<div class="col-sm-offset-2 col-sm-7">
				<div class="inner-left preview" id="querypager"></div>
			</div>
		</div>
		<!-- /example -->
	</form>
</body>
</html>